<!--Created by zhanghan on 2017/12/8 角色管理-->
<!--Updated by yangxiao2 on 2019/10/30 {{ $t('roleManage.jsyh') }}{{ $t('roleManage.xz') }}、剔除-->
<div id="roleManage">
  <yu-panel :title="$t('roleManage.jsdm')">
    <el-row :gutter="24">
      <!--左侧树 -->
<!--      <el-col :span="5">
        <yufp-ext-tree ref="roleTree" :height="height" @node-click="nodeClickFn" :data-url="treeUrl" data-id="orgId" data-label="orgName"
          data-pid="upOrgId" :data-root="dataRoot" :data-params="dataParams" lazy style="margin:10px 10px 0 0;">
        </yufp-ext-tree>
      </el-col> -->
      <el-col :span="24">
        <!--列表搜索区域 -->
        <yu-xform v-model="formdata" related-table-name="roletable" form-type="search">
          <yu-xform-group :column="4">
            <yu-xform-item :label="$t('roleManage.jsdm')" :placeholder="$t('roleManage.jsdm')" ctype="input" name="roleCode"></yu-xform-item>
            <yu-xform-item :label="$t('roleManage.jsmc')" :placeholder="$t('roleManage.jsmc')" ctype="input" name="roleName"></yu-xform-item>
            <yu-xform-item :label="$t('roleManage.zt')" :placeholder="$t('roleManage.zt')" ctype="select" name="roleSts" data-code="DATA_STS"></yu-xform-item>
          </yu-xform-group>
        </yu-xform>
        <!--列表按钮区域-->
        <yu-toolBar>
          <el-button @click="openCreateFn">{{ $t('roleManage.xz') }}</el-button>
          <el-button @click="modifyFn">{{ $t('roleManage.xg') }}</el-button>
          <el-button @click="deleteFn">{{ $t('roleManage.sc') }}</el-button>
          <el-button @click="useFn">{{ $t('roleManage.qy') }}</el-button>
          <el-button @click="unUseFn">{{ $t('roleManage.ty') }}</el-button>
          <el-button @click="openRoleUserFn">{{ $t('roleManage.jsyh') }}</el-button>
         <!-- <el-button @click="openRoleAuthFn">{{ $t('roleManage.mrqx') }}</el-button> -->
        </yu-toolBar>
        <!--列表信息-->
        <el-table-x ref="roletable" :checkbox="mainGrid.checkbox" :max-height="mainGrid.height" :data-url="mainGrid.dataUrl" :base-params="mainGrid.dataParams"
          :table-columns="mainGrid.tableColumns">
        </el-table-x>
        <!--{{ $t('roleManage.xz') }}{{ $t('roleManage.xg') }}弹窗框 -->
        <el-dialog :center="true" :title="viewTitle[viewType]" :visible.sync="dialogFormVisible" size="small">
          <el-form-x ref="roleForm" class="updateForm" :group-fields="updateFields" :buttons="updateButtons" :disabled="formDisabled" label-width="120px"></el-form-x>
        </el-dialog>
        <!--{{ $t('roleManage.jsyh') }}-->
        <el-dialog-x :center="true" :title="userMap[viewType]" :visible.sync="dialogGridVisible" height="400px" width="800px">
          <!--{{ $t('roleManage.jsyh') }}列表查询-->
          <el-form-q ref="userQuery" :field-data="userQueryFields" :buttons="userQueryButtons">
          </el-form-q>
          <!--{{ $t('roleManage.jsyh') }}{{ $t('roleManage.xz') }}、{{ $t('roleManage.jsyh') }}剔除-->
          <yu-toolBar>
              <el-button @click="addRoleUserFn">{{ $t('roleManage.xzyh') }}</el-button>
              <el-button @click="delRoleUserFn">{{ $t('roleManage.tcyh') }}</el-button>
          </yu-toolBar>
          <!--{{ $t('roleManage.jsyh') }}列表-->
          <el-table-x ref="userTable" :max-height="height - 140" :checkbox="false" :data-url="roleUserUrl" :table-columns="userTableColumns"
            :default-load="false">
          </el-table-x>
        </el-dialog-x>
        <!--{{ $t('roleManage.jsyh') }}{{ $t('roleManage.xz') }}-->
        <el-dialog-x :center="true" :title="$t('roleManage.yhxz')" :visible.sync="dialogUserVisible" height="80%" width="800px">
          <!--角色用户列表查询-->
          <el-form-q ref="userQuery1" :field-data="userGrid.userQueryFields" :buttons="userGrid.userQueryButtons"></el-form-q>
          <el-table-x ref="userSelectTable" :checkbox="true" :data-url="userUrl" :base-params="userGrid.dataParams" :table-columns="userGrid.userTableColumns" height="70%">
          </el-table-x>
          <div slot="footer" class="dialog-footer" align="center">
            <el-button type="primary" @click="saveUserRole">{{ $t('roleManage.qr') }}</el-button>
            <el-button @click="cancelUserRole">{{ $t('roleManage.qx') }}</el-button>
          </div>
        </el-dialog-x>


        <!--{{ $t('roleManage.mrqx') }} begin  add by chenlin2-->
        <el-dialog-x :center="true" :title="authMap[viewType]" :visible.sync="authDialogVisible" height="400px" width="800px">
          <!--权限列表-->
          <el-row :gutter="10">
            <el-col :span="12">
              <yufp-template-selector ref="demoSelector" :placeholder="$t('roleManage.xzmb')" width="200px" v-model="yourVal" :raw-value="rawValue"
                @select-fn="selectFn">
              </yufp-template-selector>
            </el-col>
            <el-col :span="12">
              <div class="yu-toolBar">
                <el-button-group>
                  <el-button @click="selectCancel">{{ $t('roleManage.qxxz') }}</el-button>
                </el-button-group>
              </div>
            </el-col>
          </el-row>

          <el-collapse v-model="expandName" :accordion="false">
            <el-collapse-item :title="$t('roleManage.dqrqxmb')" name="authAdd">
              <el-table-x ref="authAddTable" :max-height="height - 140" :checkbox="false" :data-url="authAddUrl" :pageable="false" :table-columns="authAddColumns"
                :default-load="false">
              </el-table-x>
            </el-collapse-item>

            <el-collapse-item :title="$t('roleManage.mrqxmb')" name="authList">
              <el-table-x ref="authTable" :max-height="height - 140" :checkbox="false" :data-url="authUrl" :pageable="false" :table-columns="authTableColumns"
                :default-load="false">
              </el-table-x>
            </el-collapse-item>
          </el-collapse>

          <div slot="footer" class="dialog-footer" align="center">
            <el-button type="primary" @click="saveUserAuth">{{ $t('roleManage.bc') }}</el-button>
            <el-button type="primary" @click="cleanAuthFn">{{ $t('roleManage.qcmrqx') }}</el-button>
          </div>
        </el-dialog-x>
        <!--{{ $t('roleManage.mrqx') }} end -->
      </el-col>
    </el-row>
  </yu-panel>
</div>